<template>
    <div id="city_container">
        <head-top go-back='ture' :head-title="cityname">
            <router-link to="/home" slot="changeCity" class="changecity">切换城市</router-link>
        </head-top>
        <form class="city_form" v-on:submit.prevent="submit()">
            <div>
                <input type="search" placeholder="输入学校、商务楼、地址" v-model="search_value">
            </div>
            <div>
                <button type="submit" class="btn">提交</button>
            </div>
        </form>
        <div class="history_title" v-if="placeNone">搜索历史</div>
        <ul>
            <li class="search_con" v-for="(item,i) in searchlist" :key="i" @click="nextPage(item.geohash)">
                <h4 class="ellipsis">{{item.name}}</h4>
                <p class="ellipsis">{{item.address}}</p>
            </li>
        </ul>
         <div class="search_none_place" v-if="placeNone">很抱歉！无搜索结果</div>
    </div>
</template>

<script>
    // import headTop from '../../components/header/head'
    import {currentcity,searchaddress} from '../../api/api'

    export default {
        data () {
            return {
                cityid:'',  //当前城市id
                cityname:'',  //当前城市名
                search_value:'',  //要搜索的值
                searchlist:[],  //搜索出来的地址
                historytitle:true,  //是否显示搜索历史的标题
                placeNone:false,  //默认不显示结果为空等字段

            }
        },

        mounted(){
            this.cityid = this.$route.params.cityid;
            //获取当前所在城市
            currentcity(this.cityid).then((res) => {
                this.cityname = res.data.name;
            });
        },
        methods:{
            submit(){ //搜索
                if(this.search_value){
                    searchaddress(this.cityid,this.search_value).then((res) =>{
                        this.historytitle = false;
                        this.searchlist = res.data;
                        this.placeNone = res.data.length? false : true;  
                    })
                }
            },

            nextPage(geohash){ //点击搜索的结果进入下一页面
                this.$router.push({path:'/msite',query:{geohash:geohash}});
            }
        }
    }

</script>

<style scoped lang="scss">
    @import 'src/style/mixin';
    #city_container{
        padding-top:2.35rem;
    }
    .changecity{
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        @include sc(0.6rem, #fff);
    }
    .city_form{
        background: #fff;
        padding-top: 0.4rem;
        border-top: 1px solid $bc;
        border-bottom: 1px solid $bc;
        div{
            width: 90%;
            margin: 5px auto 10px;
            input{
                width: 100%;
                padding: .3rem;
                border: 1px solid $bc;
                @include sc(0.75rem, #000);
            }
            button{
                width: 100%;
                padding: .3rem;
                background:  $blue;
                @include sc(0.75rem, #fff);
            }
        }
    }
    .history_title{
        font-size:.5rem;
    }
    .search_con{
        padding: .5rem;
        font-size: .75rem;
        border-bottom: 1px solid #e4e4e4;
        background: #fff;
        p{
            font-size: .6rem;
            padding-top: 5px;
            color: #999;
        }
    }
</style>